<template>
    <div>
        <el-card class="box-card">
            <el-form :model="form" label-width="120px" :formData=formData :s=s>
                <el-form-item label="分类名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="上级分类">
                    <el-select>
                        <el-option :value="item.name" v-for="item, index in s" :key="index" />
                    </el-select>
                </el-form-item>

                <el-form-item label="分类筛选样式">
                    <el-radio-group>
                        <el-radio label="普通" />
                        <el-radio label="颜色" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="能否进行检索">
                    <el-radio-group>
                        <el-radio label="不需要检索" />
                        <el-radio label="关键字检索" />
                        <el-radio label="不需要检索" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品属性关联">
                    <el-radio-group>
                        <el-radio label="是" />
                        <el-radio label="否" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性是否可选">
                    <el-radio-group>
                        <el-radio label="唯一" />
                        <el-radio label="单选" />
                        <el-radio label="复选" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值的录入方式">
                    <el-radio-group>
                        <el-radio label="手工录入" />
                        <el-radio label="从下面列表中选择" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值可选值列表">
                    <el-input />
                </el-form-item>
                <el-form-item label="是否支持手动更新">
                    <el-radio-group>
                        <el-radio label="是" />
                        <el-radio label="否" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序属性">
                    <el-input />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="Reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { Ref } from "vue"
import * as api from '../../request/api'
import type { AdminAdd, IAdminDelete, IAdminListRes, IAdminListItem, createAdd, update, updatebj } from '../../request/QmsAdminConreiller/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from "vue-router"
// do not use same name with ref
let route = useRoute()
const form = ref({
    filterType: 0,
    handAddStatus: 0,
    inputList: "",
    inputType: 0,
    name: "",
    productAttributeCategoryId: 0,
    relatedStatus: 0,
    searchType: 0,
    selectType: 0,
    sort: 0,
    type: 0,
    id: route.query.id,
})
let data = {}
let formData = ref({})
let s = ref({})
api.admin.withAttrItem().then(res => {
    console.log(res);
    formData.value = res
})
api.admin.AdminAddCategoryItem(data).then(res => {
    s.value = res.list
    console.log(s);

})
const onSubmit = (data: any) => {
    console.log(data);
    ElMessageBox.confirm(
        '确定提交吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            if (form) {
                console.log(1);

                await api.admin.productAttributeUpdate(form.value)
            }

            ElMessage({
                type: 'success',
                message: '提交成功！！！',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })

}
const Reset = () => {
    console.log(1);

}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 790px;
    margin: 100px auto;
}
</style>